<script setup lang='ts'>
	import type {
		FormInstance
	} from 'element-plus';

	const props = defineProps({
		dialogVisble: Boolean,
		dialogTitle: String,
		width: {
			type: String,
			default: '50%'
		},
		showFooter: {
			type: Boolean,
			default: true
		}
	})

	const emit = defineEmits(['update:dialogVisble', 'update:dialogTitle', 'close', 'success']);

	defineExpose({
		validate: (formEl: FormInstance | undefined) => {
			if (!formEl) return Promise.resolve(false)
			return formEl.validate()
		}
	})

	const close = () => {
		emit('update:dialogVisble', false);
		emit('close');
	};

	const success = () => {
		emit('success');
	};

	const handleDialogClose = () => {
		emit('update:dialogVisble', false);
		emit('close');
	};
</script>

<template>
	<div>
		<el-dialog :model-value="props.dialogVisble" :title="props.dialogTitle" :width="width"
			@close="handleDialogClose" draggable class="custom-dialog" :close-on-click-modal="false"
			:close-on-press-escape="false">
			<div class="dialog-content">
				<slot />
			</div>

			<template v-if="showFooter" #footer>
				<div class="dialog-footer">
					<el-button class="dialog-btn cancel-btn" @click="close">取消</el-button>
					<el-button class="dialog-btn confirm-btn" @click="success">确定</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<style scoped>
	/* 对话框整体样式 */
	:deep(.custom-dialog) {
		border-radius: 12px;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
		overflow: hidden;
	}

	/* 对话框头部样式 */
	:deep(.custom-dialog .el-dialog__header) {
		padding: 16px 20px;
		margin-right: 0;
		background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
		border-bottom: 1px solid #e6e6e6;
	}

	:deep(.custom-dialog .el-dialog__title) {
		font-size: 18px;
		font-weight: 600;
		color: #333;
	}

	:deep(.custom-dialog .el-dialog__headerbtn) {
		top: 16px;
		right: 20px;
		font-size: 18px;
	}

	/* 对话框内容区域 */
	.dialog-content {
		padding: 20px;
		max-height: 70vh;
		overflow-y: auto;
	}

	/* 对话框底部按钮区域 */
	.dialog-footer {
		display: flex;
		justify-content: flex-end;
		padding: 12px 20px;
		border-top: 1px solid #e6e6e6;
	}

	.dialog-btn {
		padding: 8px 20px;
		border-radius: 6px;
		font-size: 14px;
		font-weight: 500;
		transition: all 0.3s;
	}

	.cancel-btn {
		background-color: #f5f7fa;
		color: #606266;
		border: 1px solid #dcdfe6;
	}

	.cancel-btn:hover {
		background-color: #e6e8eb;
		color: #606266;
		border-color: #c0c4cc;
	}

	.confirm-btn {
		background-color: #409eff;
		color: white;
		border: 1px solid #409eff;
		margin-left: 12px;
	}

	.confirm-btn:hover {
		background-color: #66b1ff;
		border-color: #66b1ff;
	}

	/* 响应式调整 */
	@media (max-width: 768px) {
		:deep(.custom-dialog) {
			width: 90% !important;
			margin-top: 5vh !important;
		}

		.dialog-content {
			padding: 15px;
		}
	}

	/* 滚动条样式 */
	:deep(.custom-dialog) ::-webkit-scrollbar {
		width: 6px;
		height: 6px;
	}

	:deep(.custom-dialog) ::-webkit-scrollbar-thumb {
		background-color: rgba(144, 147, 153, 0.3);
		border-radius: 3px;
	}

	:deep(.custom-dialog) ::-webkit-scrollbar-thumb:hover {
		background-color: rgba(144, 147, 153, 0.5);
	}
</style>